<template>
    <span :class='{"update-data": !noIconForCol && (isUpdate || isAddNode(data.id))}'>
        <a-input-number v-if="isEdit" class="edit-content" v-model="inpValue" :min="1" @change="selChange" />
        <template v-else>
            <a-input-number v-if="editAble" ref='ref_sel' v-model="inpValue"
                :min="1" @blur="handleChange" />
            <span v-else @click="showSel">{{data[word]}}</span>
        </template>
    </span>
</template>
<script>
import mix from '../js/mainTable'
export default {
    mixins:[mix],
    methods: {
        selChange(value) {
            this.$emit('update',value)
        },
        showSel() {
            if (this.columnInfo.edit && this.isChild && this.data.actionPerssion && this.statePermission &&
                (this.data['lock.locked'] == undefined || !this.data['lock.locked'])) {
                this.editAble = true
                this.$nextTick(() => {
                    this.$refs.ref_sel.focus();
                })
            }
            
        },
        handleChange() {
            this.editAble = false
            if (this.inpValue != this.data[this.word])
                this.$emit('update',this.inpValue)
        },
    }
}
</script>
<style scoped>
.edit-content {
    width: 100%;
}
</style>